<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Adv. Example: Setting and Using Styles</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../os3grid.js" type="text/javascript"></script>
	<script src="../form_validators.js" type="text/javascript"></script>
</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Advanced Example: Advanced Cell Value Manipulation</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_left">
	<div class="menu_title">Examples</div>

	<div>
		<a href="index.html">Main Page</a><br />
		<a href="ex1.html">Simple Grid</a><br />
		<a href="ex2.html">Sortable Grid</a><br />
		<a href="ex3.html">Sortable Grid</a><br />
		<a href="ex4.html">Editable Grid</a><br />
		<a href="ex5.html">Custom Callbacks</a><br />
		<a href="ex6.html">Rows Selection</a><br />
		<a href="ex7.html">Column Resize</a><br />
		<a href="ex8.html">Column Renderers</a><br />
	</div>

	<div class="menu_title">Advanced Examples</div>
	<div>
		<a href="adv_styles.html">Setting and Using Styles</a><br />
		<a href="adv_edit.html">Using OS3Grid to edit a dataset</a><br />
		<a href="adv_cell_manip.html">Advanced Cell Value Manipulation</a><br />
	</div>

	<div class="menu_title">Support OS3Grid</div>
	<a href="http://sourceforge.net/donate/index.php?group_id=132180" target="_blank"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support OS3Grid" /> </a>
</div>

<div id="block_middle">
	<div>
		<p>
		In this advanced example, I'll show you how to create <i>dynamic</i>  web forms. 
		The main goal of this example is to enable the developer to create forms on the fly inside the OS3Grid.
		Suppose you want the user to edit the dataset (as shown in <a href="adv_edit.html">Advanced Edit</a> example,
		but also, you want her to be able to choose from a list (a <tt>&lt;select&gt;</tt> widget).
		</p>

		<p>
		To achieve our goal, we'll make the last column (the one containing the user type) clickable. One the user
		clicks on the cell, a dropdown list will be shown to enable the user to select from the list rather than have
		her to write in all the string, which is more error prone.
		</p>

		<p>
		There are a lot way to have our OS3Grid display a dropdown list one clicked on a cell, but, for sure, since we
		are using the powerful OS3Grid, the best one is to create a <i>column rendered</i>, as shown in <a href="ex8.html">Example 8 - Column Renderers</a>.
		Our column renderer is the following:

		<div class="code"><pre>
				function list_renderer ( val, id )
				{
					return '&lt;span onclick="show_list( \'' + id + '\', \'' + val + '\')"&gt;' + val + '&lt;/span&gt;';
				}
		</pre></div>

		This code will actually render in the cell a <tt>&lt;span&gt;</tt> element that will react to user clicks, showing the dropdown list.
		<b>PLEASE NOTE</b> that since OS3Grid version 0.6, the list_renderer function can take <b>two parameters</b>: the first is the cell <i>value</i> (as usual),
		and the second is the <i>ful_id</i> of the cell.
		</p>

		<p>
		Here there is the <tt>show_list()</tt> callback code:

		<div class="code"><pre>
				function show_list ( id, val )
				{
					var span = document.getElementById ( id ).firstChild;

					var lst = [ 
							[ "admin", "Administrator" ],
							[ "user",  "User" ],
							[ "beta",  "Beta Tester" ],
						  ];

					var t, chk, c, l = lst.length;
					var curr_v = span.innerHTML;
					var s;

					s = '&lt;select onchange="list_changed(this.value,\'' + id + '\')"&gt;';
					for ( t = 0; t &lt; l; t ++ )
					{
						c =  lst [ t ];
						if ( c [ 0 ] == curr_v )
							chk = 'selected="selected"';
						else
							chk = '';

						s += '&lt;option value="' + c [ 0 ] + '" ' + chk + '&gt;' + c [ 1 ] + '&lt;/option&gt;';
					}
					s += '&lt;/select&gt;';

					span.innerHTML = s;
				}
		</pre></div>

		The first line simply get the <tt>&lt;span&gt;</tt> element from the page, then the list of possible values is defined.
		The <tt>for()</tt> cycles through all the possible values and builds the <tt>&lt;select&gt;</tt> option list, then the
		<tt>&lt;span&gt;</tt> element HTML is replaced by the <tt>&lt;select&gt;</tt> element so the dropdown list is shown.
		
		</p>

		<p>
		Once the user selects a value from the list, we have to write the value into the <tt>&lt;span&gt;</tt> removing the 
		dropdown list, this is the callback code:

		<div class="code"><pre>
				function list_changed ( val, id )
				{
					var g = os3grid_set_cell_value ( id, val );
					g.render ();
				}
		</pre></div>
		</p>

		<p>
		And that's all! By combining this feature with the <a href="adv_edit.html">Edit Datasets</a> example, you can create very powerful and flexible
		webforms!!
		</p>

		<div class="result">
			<div id="my_form"></div>
			<div id="grid"></div>
			<script type="text/javascript">
				function show_list ( id, val )
				{
					var span = document.getElementById ( id ).firstChild;

					var lst = [ 
							[ "admin", "Administrator" ],
							[ "user",  "User" ],
							[ "beta",  "Beta Tester" ],
						  ];

					var t, chk, c, l = lst.length;
					var curr_v = span.innerHTML;
					var s;

					s = '<select onchange="list_changed(this.value,\'' + id + '\')">';
					for ( t = 0; t < l; t ++ )
					{
						c =  lst [ t ];
						if ( c [ 0 ] == curr_v )
							chk = 'selected="selected"';
						else
							chk = '';

						s += '<option value="' + c [ 0 ] + '" ' + chk + '>' + c [ 1 ] + '</option>';
					}
					s += '</select>';

					span.innerHTML = s;
				}

				function list_changed ( val, id )
				{
					var g = os3grid_set_cell_value ( id, val );
					g.render ();
				}

				function list_renderer ( val, id )
				{
					return '<span onclick="show_list( \'' + id + '\', \'' + val + '\')">' + val + '</span>';
				}


				// Create an OS3Grid instance
				var g = new OS3Grid ();

				
				// Grid Headers are the grid column names
				g.set_headers ( 'nick', 'name', 'email addr' );

				g.set_col_render ( 2, list_renderer );

				var arr = [
						[ "fsoft", "Fabio Rotondo", "admin" ],
						[ "nick",  "Nick Fury", "user" ],
						[ "john", "John JJ Jameson", "user" ],
						[ "reds", "Mary Jane Watson", "beta" ],
						[ "white", "Barry White", "beta" ]
					  ];

				var t, c, l = arr.length;

				for ( t = 0; t < l; t ++ )
				{
					c = arr [ t ];
					g.add_row ( c [ 0 ], c [ 1 ], c [ 2 ] );
				}


				// Enable sortable rows
				g.sortable = true;

				// Enable highlight of rows with the mouse
				g.highlight = true;

				g.set_col_editable ( 1, "txt" );
				g.set_col_editable ( 2, "txt" );

				g.sort_on_edit = true;

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>
		</div>
	</div>
</div>

</body>
</html>

